<template>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    fullscreen
    :closable="false"
    :esc-to-close="false"
    title-align="center"
    :body-style="{
      padding: 0,
      backgroundColor: '#f3f3f3',
      overflowX: 'hidden'
    }"
  >
    <div class="header">
      <div class="title">{{ data?.id ? '编辑' : '新增' }}入职通知模板</div>
      <a-menu
        @menu-item-click="changeMenu"
        class="menu"
        mode="horizontal"
        :selected-keys="menuKey"
      >
        <a-menu-item key="1">
          <div class="menu-item">
            <span class="icon">①</span>基础设置
          </div></a-menu-item
        >
        <a-menu-item key="2">
          <div class="menu-item">
            <span class="icon">②</span>表单设计
          </div></a-menu-item
        >
      </a-menu>
      <a-space>
        <a-button @click="save('2')" type="primary">保存</a-button>
        <a-button @click="back" type="primary">取消</a-button>
        <!-- <a-button v-if="menuSelected === '1'" @click="goTo(1)" type="outline"
          >下一步</a-button
        >
        <a-button v-else @click="goTo()" type="outline">上一步</a-button> -->
        <!-- <a-button @click="save('2')" type="primary">保存</a-button>
        <a-button @click="guan" type="primary">取消</a-button> -->
      </a-space>
    </div>
    <div class="content">
      <div class="main">
        <div class="base" v-show="menuSelected === '1'">
          <div class="base-form">
            <a-form
              ref="refForm"
              :model="fromData"
              :rules="rules"
              layout="vertical"
            >
              <a-form-item field="name" label="入职通知模板名称">
                <a-input
                  size="large"
                  v-model="fromData.name"
                  placeholder="请输入模板名称"
                  allow-clear
                />
              </a-form-item>
              <a-form-item field="state" label="启用状态">
                <a-switch
                  v-model="fromData.enable"
                  :checked-value="1"
                  :unchecked-value="2"
                />
              </a-form-item>
              <!-- <a-form-item field="state" label="是否默认">
                <a-switch
                  v-model="fromData.required"
                  :checked-value="1"
                  :unchecked-value="2"
                />
              </a-form-item> -->
              <a-form-item field="remark" label="描述">
                <a-textarea
                  v-model="fromData.remark"
                  placeholder="请输入"
                  show-word-limit
                  :max-length="300"
                  :auto-size="{
                    minRows: 5
                  }"
                  allow-clear
                />
              </a-form-item>
            </a-form>
          </div>
          <!-- <div class="btn">
            <a-button
              type="primary"
              style="margin-right: 50px; flex: 1"
              @click="next"
            >
              下一步
            </a-button>
            <a-button style="flex: 1" @click="guan"> 取消 </a-button>
          </div> -->
        </div>
        <div class="from" v-show="menuSelected === '2'">
          <FromSetting
            v-model:materialData="fromData.detail"
            :id="fromData.id"
          />
          <!-- <div class="btn">
            <a-button
              type="primary"
              style="margin-right: 50px; flex: 1"
              @click="save"
            >
              保存
            </a-button>
            <a-button style="flex: 1" @click="back"> 取消 </a-button>
          </div> -->
        </div>
      </div>
    </div>
    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" @click="back">取消</a-button>

          <a-button
            type="secondary"
            :disabled="+menuSelected <= 1"
            @click="onPrev"
          >
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="+menuSelected !== 2"
            :disabled="+menuSelected >= 4"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" v-show="+menuSelected === 2" @click="save">
            保存
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import {
  EditBonboardingInform,
  AddBonboardingInform,
  RepeatSchemePeople
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { Message } from '@arco-design/web-vue';
import { baseType } from './type';
import FromSetting from './fromSetting/index.vue';
import clonedeep from 'lodash.clonedeep';
const props = withDefaults(
  // 参数说明
  defineProps<{
    data?: baseType; // 请求table数据的函数
    fn?: any;
  }>(),
  {}
);
const fromData = ref<baseType>({
  enable: 1,
  name: '',
  remark: '',
  detail: [{ content: '', oldcodeArray: [] }]
});
const menuKey = ref(['1']);
const menuSelected = ref('1');
const visible = ref(false); // 显示弹框
// 基础设置的值
// const baseSetting = reactive<baseType>({});
// 显示全屏弹框
const fullScreen = () => {
  visible.value = true;
};

const back = () => {
  fromData.value = {
    enable: 1,
    name: '',
    remark: '',
    detail: [{ content: '', oldcodeArray: [] }]
  };
  menuSelected.value = '1';
  menuKey.value = ['1'];
  visible.value = false;
};
const refForm = ref();
// 保存
const save = async () => {
  const res = await refForm.value.validate();
  if (res) return;
  fromData.value.tType = 2;
  if (fromData.value.id) {
    await EditBonboardingInform(changData(fromData.value));
  } else {
    await AddBonboardingInform(changData(fromData.value));
  }
  fromData.value = {
    enable: 1,
    name: '',
    remark: '',
    detail: [{ content: '', oldcodeArray: [] }]
  };
  menuSelected.value = '1';
  menuKey.value = ['1'];
  visible.value = false;
  props.fn();
};
const changData = (data: any) => {
  let newData = clonedeep(data);
  let codeArray = data?.detail[0]?.oldcodeArray;
  const newcodeArray: any = [];
  let content = data?.detail[0]?.content;
  codeArray?.forEach((ele: any) => {
    newcodeArray.push(ele.ctlCode);
    let regexp = new RegExp(`#${ele.ctlCnName}#`, 'g');
    content = content.replace(regexp, `#${ele.ctlCode}#`);
  });
  newData.detail[0].codeArray = newcodeArray.join(',');
  newData.detail[0].content = content;
  return newData;
};

// 点击标签
const changeMenu = async (e: string) => {
  if (await refForm?.value?.validate()) {
    menuKey.value = [`1`];
    return;
  } else {
    menuKey.value = [`${e}`];
    menuSelected.value = e;
  }
  menuSelected.value = e;
};

const onPrev = () => {
  menuSelected.value = Math.max(1, +menuSelected.value - 1) + '';
  menuKey.value = [`${menuSelected.value}`];
};
const onNext = async () => {
  if (await refForm?.value?.validate()) {
    menuKey.value = [`1`];
    return;
  } else {
    menuSelected.value = Math.min(2, +menuSelected.value + 1) + '';
    menuKey.value = [`${menuSelected.value}`];
  }

  console.log('====================================');
  console.log(menuSelected.value);
  console.log(menuKey.value);
  console.log('====================================');
  // current.value = Math.min(4, current.value + 1);
};
watch(
  () => props.data,
  () => {
    fromData.value.detail = [];
    fromData.value = { ...props.data };
  }
);
// 暴露方法给父组件
defineExpose({ fullScreen });
const rules = {
  name: [
    {
      required: true,
      message: '模板名称不能为空'
    },
    {
      validator: async (value: string, cb: any) => {
        try {
          if (fromData.value.id && value === props.data?.name) {
            //
          } else {
            const res = await RepeatSchemePeople({ name: value, tType: 2 });
            if (res.code) cb(`${res.msg}`);
          }
        } catch (error: any) {
          Message.error(error);
          console.log(error);
        }
      }
    }
  ]
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  background: #3d7eff;
  padding: 10px;
  .title {
    color: #fff;
    font-size: 16px;
  }
  .form-name {
    font-size: 18px;
  }

  // background: rgba(61, 126, 255, 1);
  // color: white;
  .menu {
    flex: 1;
    text-align: center;
    background: #3d7eff;
    height: 100%;
    &-item {
      display: flex;
      align-items: center;
      .icon {
        font-size: 18px;
      }
    }
  }
}

.content {
  height: 100vh;

  .main {
    height: 100%;
    background: #fff;

    .base {
      background-color: #fff;
      height: 100%;
      :deep(.arco-form-item-label-col > .arco-form-item-label) {
        font-size: 16px;
      }
      &-form {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        margin-top: 20px;
        font-weight: 700;
      }
    }

    .print-set {
      display: flex;
      height: 100%;

      .form-check {
        width: 300px;
        background: white;
        height: 100%;
        margin: 16px 0;
        overflow: auto;

        .check-item {
          display: flex;
          justify-content: space-between;
          padding: 16px;
        }
      }

      .form {
        width: 700px;
        height: 1000px;
        overflow: auto;
        margin: 20px auto;
        padding: 16px;
        background: white;
      }
    }
    .from {
      padding: 20px;
    }
  }
}
.btn {
  display: flex;
  width: 60%;
  height: 100px;
  margin: 50px auto;
}
:deep(.arco-menu-item) {
  height: 100%;
  background-color: #3d7eff;
  color: #fff !important;
}
:deep(.arco-menu-selected) {
  background-color: #165dff !important;
  color: #fff;
}
:deep(.arco-menu-item:hover) {
  background-color: #165dff !important;
}
:deep(.arco-menu-selected:hover) {
  background-color: #165dff !important;
}
:deep(.arco-menu-overflow-wrap) {
  flex: 0.9;
}

.modal-footer {
  text-align: center;
}
</style>
